<template>
   <div class="home-product">
     <MyPanel title="生鲜">
        <!--使用右侧插槽-->
        <template #right>
            <div class="sub">
                 <router-link  to='/'>海鲜</router-link>
                 <router-link  to='/'>水果</router-link>
                 <router-link  to='/'>蔬菜</router-link>
                 <router-link  to='/'>水产</router-link>
                 <router-link  to='/'>肉类</router-link>

            </div>
            <AppMore />
        </template>
        <div class="goods">
            <!--左侧-->
            <router-link class="left"  to="/">
            <img src="../../assets/51.png">
            </router-link>
            <!--右侧-->
       <div class="right">
          <ul class="goods-list">
            <li>
              <MyGoodsItem/>
            </li>
             <li>
              <MyGoodsItem/>
            </li>
             <li>
              <MyGoodsItem/>
            </li>
             <li>
              <MyGoodsItem/>
            </li>
          </ul>
          <ul class="goods-list">
           <li>
              <MyGoodsItem/>
            </li>
             <li>
              <MyGoodsItem/>
            </li>
             <li>
              <MyGoodsItem/>
            </li>
             <li>
              <MyGoodsItem/>
            </li>
          </ul>
        
        </div>
        </div>
  
     </MyPanel> 
       <MyPanel title="美食">
        <!--使用右侧插槽-->
        <template #right>
            <div class="sub">
                 <router-link  to='/'>网易黑猪</router-link>
                 <router-link  to='/'>水产海鲜</router-link>
                 <router-link  to='/'>全球美食</router-link>
                 <router-link  to='/'>冷冻冷藏</router-link>
                 <router-link  to='/'>优质虾品</router-link>

            </div>
            <AppMore />
        </template>
        <div class="goods">
            <!--左侧-->
            <router-link class="left"  to="/">
            <img src="../../assets/home_goods_cover.jpg">
            </router-link>
            <!--右侧-->
       <div class="right">
          <ul class="goods-list">
            <li>
              <MyGoodsItem/>
            </li>
             <li>
              <MyGoodsItem/>
            </li>
             <li>
              <MyGoodsItem/>
            </li>
             <li>
              <MyGoodsItem/>
            </li>
          </ul>
          <ul class="goods-list">
           <li>
              <MyGoodsItem/>
            </li>
             <li>
              <MyGoodsItem/>
            </li>
             <li>
              <MyGoodsItem/>
            </li>
             <li>
              <MyGoodsItem/>
            </li>
          </ul>
        
        </div>
        </div>
       </MyPanel>
         <MyPanel title="服饰">
        <!--使用右侧插槽-->
        <template #right>
            <div class="sub">
                 <router-link  to='/'>室外拖鞋</router-link>
                 <router-link  to='/'>春夏潮鞋</router-link>
                 <router-link  to='/'>飞织系列</router-link>
                 <router-link  to='/'>一脚蹬懒人系列</router-link>
                 <router-link  to='/'>经典两带式</router-link>

            </div>
            <AppMore />
        </template>
        <div class="goods">
            <!--左侧-->
            <router-link class="left"  to="/">
            <img src="../../assets/c7.jpg">
            </router-link>
            <!--右侧-->
       <div class="right">
          <ul class="goods-list">
            <li>
              <MyGoodsItem/>
            </li>
             <li>
              <MyGoodsItem/>
            </li>
             <li>
              <MyGoodsItem/>
            </li>
             <li>
              <MyGoodsItem/>
            </li>
          </ul>
          <ul class="goods-list">
           <li>
              <MyGoodsItem/>
            </li>
             <li>
              <MyGoodsItem/>
            </li>
             <li>
              <MyGoodsItem/>
            </li>
             <li>
              <MyGoodsItem/>
            </li>
          </ul>
        
        </div>
        </div>
     </MyPanel> 
    </div>
</template>

<script>
import { getProducts } from '@/api';
import { ref } from "vue";
import MyGoodsItem from  '../../components/MyGoodsItem.vue'

import MyPanel from '../../components/MyPanel.vue'
export default {
   components:{
        MyPanel,
        MyGoodsItem,

    },
     setup(props) {
    const products = ref([]);
    const getProduct = async () => {
      try {
        const res = await getProducts();
        console.log(res);
        if(res.msg=='操作成功'){
          products.value=res.result;
        }
      } catch (error) {
        console.log(error);
      }
    };
    getProduct();

    return { products };
  }
}
</script>

<style lang="less" scoped>
.home-product {
  background-color: #fff;
  padding-bottom: 40px;
  .sub {
    a {
      font-size: 16px;
      padding: 2px 10px;
      border-radius: 4px;
      margin-right: 0 7px;
      &:hover {
        background-color: @xtxColor;
        color: #fff;
      }
      &:last-child {
        margin-right: 40px;
      }
    }
  }

  .goods {
    height: 610px;
    display: flex;

    .left {
      width: 240px;
      margin-right: 10px;
    
      img {
        width: 100%;
        height: 100%;
      }
    }
    .right {
      flex: 1;
      border: 1px solid #ccc;
      .goods-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
      }
    }
  }
}
</style>